<template>
  <div class="app-container">
    <div class="potentialTip">
      潜在客户指访问过活动或者商品详情链接，最终却没有报名下单的客户。对意向较高的潜客可通过拨打电话，微信私聊等方式进行二次促单转化。
      <el-button type="text" @click="useGuide">查看详情></el-button>
    </div>
    <div class="dataStats">
      <div>
        <span>{{ potentialStats.todayAddMemberNumber }}</span>人
        <div class="describe">
          <span>今日新增潜在客户</span>
        </div>
      </div>
      <div>
        <span>{{ potentialStats.todayAddMemberMobileNumber }}</span>人
        <div class="describe">
          <span>今日新增留手机客户</span>
        </div>
      </div>
      <div>
        <span>{{ potentialStats.memberNumberTotal }}</span>人
        <div class="describe">
          <span>总潜在客户</span>
        </div>
      </div>
      <div>
        <span>{{ potentialStats.memberMobileNumberTotal }}</span>人
        <div class="describe">
          <span>总留手机号客户</span>
        </div>
      </div>
    </div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="访客信息:" prop="wxNickname">
        <el-input
          v-model="queryParams.wxNickname"
          placeholder="请输入微信昵称"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="直接分享人:" prop="direct">
        <el-input
          v-model="queryParams.direct"
          placeholder="请输入微信昵称"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="客户状态" prop="memberType">
        <el-select v-model="queryParams.memberType" placeholder="请选择" clearable>
          <el-option
            v-for="dict in dict.type.member_browse_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="浏览完整度" prop="browseSchedule">
        <el-select v-model="queryParams.browseSchedule" placeholder="请选择" clearable>
          <el-option
            v-for="dict in dict.type.browse_schedule"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="访问时间">
        <el-date-picker
          v-model="queryParams.dateRange"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="备注:" prop="remark">
        <el-input
          v-model="queryParams.remark"
          placeholder="请输入备注内容"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="访问类型:" prop="productType">
        <el-select v-model="queryParams.productType" disabled placeholder="请选择" clearable>
          <el-option
            v-for="dict in dict.type.product_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动名称:" prop="activityId">
        <ActivitySelector
          style="width: 300px"
          placeholder="请选择"
          v-model="queryParams.activityId"
          retrun-type="string"
          :not-show-all-option="true"
          clearable
        />
      </el-form-item>
      <el-form-item label="报名信息" prop="memberType">
        <el-select v-model="queryParams.isEnrollInfo" placeholder="请选择" clearable>
          <el-option label="全部" :value="0"/>
          <el-option label="提交了报名信息的用户" :value="1"/>
          <el-option label="无报名信息的用户" :value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="middleTip">
      潜在客户 {{ potentialStats.memberNumberTotal }}人，{{ potentialStats.memberMobileNumberTotal }}人留下手机号。
    </div>
    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="客户信息">
        <template slot-scope="scope">
          <div class="wxInfoTitle">
            <image-preview class="wxInfoImg" :src="scope.row.avatarUrl" :width="40" :height="40"/>
            <router-link :to="'/member/info/index/' + scope.row.memberId" class="link-type link-text">
              <el-tooltip placement="top">
                <div slot="content">
                  {{ scope.row.nickname }}
                </div>
                <div class="wxInfo">
                  <div class="wxInfoItem">{{ scope.row.nickname }}</div>
                </div>
              </el-tooltip>
            </router-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="客户状态" key="memberStatus" prop="memberStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.member_browse_status" :value="scope.row.memberStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="访问类型" key="productType" prop="productType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.product_type" :value="scope.row.productType"/>
        </template>
      </el-table-column>
      <el-table-column label="活动/商品名称" key="title" prop="title">
        <template slot-scope="scope">
          <router-link :to="{path:'/index'}" class="link-type">
            {{ scope.row.title }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="浏览信息">
        <template slot-scope="scope">
          <span>浏览{{ scope.row.browseNumber }}次</span>
          <br/>
          <span>共浏览{{ scope.row.browseTimeLength | formatSeconds }}</span>
        </template>
      </el-table-column>
      <el-table-column label="浏览完整度" prop="browseRatio">
        <template slot-scope="scope">
          <span>{{ scope.row.browseRatio }}%</span>
        </template>
      </el-table-column>
      <el-table-column label="最近访问时间" prop="latelyAccessTime">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.latelyAccessTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否留下手机号">
        <template v-slot="scope">
          <div v-if="scope.row.name && scope.row.mobile">
            <span>{{ scope.row.name }}</span>
            <br/>
            <span>{{ scope.row.mobile }}</span>
          </div>
          <span v-else>未留</span>
        </template>
      </el-table-column>
      <el-table-column label="邀请员工" prop="realname"/>
      <el-table-column label="备注" prop="remark"/>
      <el-table-column label="操作" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="goCheckDetail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog title="潜在客户使用指南" :visible.sync="useGuideOpen" width="700px">
      <div class="useGuide">
        <p>
          <img src="@/assets/images/share_ask.png" alt="share_answer">
          什么是潜在客户？
        </p>
        <p>
          <img src="@/assets/images/share_answer.png" alt="share_answer">
          潜在客户指访问过活动或者商品详情链接，最终却没有报名下单的客户。已报名的客户会从潜在客户列表中移出，并添加到活动报名表中。
        </p>
        <p>
          <img src="@/assets/images/share_ask.png" alt="share_answer">
          潜在客户有什么用？
        </p>
        <p>
          <img src="@/assets/images/share_answer.png" alt="share_answer">
          我们可以通过分析客户的浏览数据(访问次数、停留时长、浏览完整度等)来洞察客户的报名意向，对意向较高的客户可通过拨打电话，微信私聊等方式进行二次促单转化。
          大数据统计，浏览完整度70%以上，停留时间15秒以上的客户，二次营销转化率为71.32%
        </p>
        <p>
          <img src="@/assets/images/share_ask.png" alt="share_answer">
          适用范围
        </p>
        <p>
          <img src="@/assets/images/share_answer.png" alt="share_answer">
          当前报名、抽奖、拼团这三种活动类型，以及店铺商品都已支持记录潜在客户，其他活动将陆续开放潜在客户功能。
        </p>
      </div>
    </el-dialog>
    <el-drawer
      :visible.sync="detailDrawerOpen"
      direction="rtl"
      size="75%">
      <div class="drawerWhole">
        <div class="onePart">
          <span>查看他的其它浏览</span>
          <span>
            <el-radio-group v-model="drawerProductType" >
            <el-radio
              disabled
              size="mini"
              v-for="dict in dict.type.product_type"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
          </span>
          <span>
            <ActivitySelector
              style="width: 300px"
              placeholder="请选择"
              v-model="drawerActivityId"
              retrun-type="string"
              :not-show-all-option="true"
              clearable
            />
          </span>
        </div>
        <div class="leftAndRight">
          <div class="left">
            <div class="remarkAndType">
              <div class="remarkAndTypeLeft">
                <div class="remarkAndTypeLeftImg">
                  <image-preview :src="drawerMemberForm.avatarUrl" :width="80" :height="80"/>
                </div>
                <div class="remarkAndTypeLeftRemark">
                  <p>{{ drawerMemberForm.nickname }}</p>
                  <p>备注：{{ drawerMemberForm.remark }}</p>
                  <p>{{ drawerMemberForm.mobile }}</p>
                </div>
                <div class="editRemark">
                  <el-popover
                    placement="top"
                    width="200"
                    v-model="visible">
                    <p style="font-weight: bold; margin: 5px 0">备注内容</p>
                    <el-input type="textarea" :rows="2" maxlength="10" v-model="memberRemark" max placeholder="请输入，最多10个字" clearable/>
                    <div style="text-align: right; margin: 0">
                      <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                      <el-button size="mini" type="text" @click="editRemark">确定</el-button>
                    </div>
                    <el-button slot="reference" type="text" size="mini">修改备注</el-button>
                  </el-popover>
                </div>
              </div>
              <div class="remarkAndTypeRight">
                <div class="remarkAndTypeRightImg">
                  <img src="@/assets/images/signal.png" width="50px" alt="share_answer">
                </div>
                <div class="remarkAndTypeRightMemberType">
                  <p>客户分类</p>
                  <p>
                    <span v-if="drawerMemberStatus == 2">仅浏览客户</span>
                    <span v-if="drawerMemberStatus == 1">留下手机号<span v-if="drawerBrowseInfo.enrollStatus == 2">未报名</span></span>
                  </p>
                </div>
              </div>
            </div>
            <div class="degree">
              <div class="degreeTitle">
                <span>潜在客户意向程度</span>
                <span>该客户已留下手机号，快去二次营销吧</span>
              </div>
              <el-divider></el-divider>
              <div class="steps">
                <el-steps :active="drawerDegreeSteps" finish-status="success" align-center>
                  <el-step title="打开浏览"></el-step>
                  <el-step title="填写信息"></el-step>
                  <el-step title="购买成功"></el-step>
                </el-steps>
              </div>
            </div>
            <div class="depth">
              <div class="depthTitle">
                <span>访问深度</span>
              </div>
              <el-divider></el-divider>
              <div class="depthStats">
                <div>
                  <div>
                    <p class="statsShow">{{ (drawerBrowseInfo.browseTimeLength / drawerBrowseInfo.browseNumber) | formatSeconds }}</p>
                    <p class="statsShowDesc">平均停留时间</p>
                  </div>
                  <div>
                    <p class="statsShow">{{ drawerBrowseInfo.browseNumber === 1 ? '仅访问一次' : ((drawerAvgGapTime / drawerBrowseInfo.browseNumber) | formatSeconds) }}</p>
                    <p class="statsShowDesc">平均访问时间间隔</p>
                  </div>
                  <div>
                    <p class="statsShow">{{ drawerShareNumber }}</p>
                    <p class="statsShowDesc">分享次数</p>
                  </div>
                </div>
                <el-divider class="setDivider"></el-divider>
                <div class="timeSlot">该客户访问的时段：{{ drawerActionStartTime }} - {{ drawerActionEndTime }}</div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="rightOnePart">
              <div class="rightOnePartTitle">
                <span>访问信息</span>
              </div>
              <el-divider></el-divider>
              <div class="rightOnePartContent">
                <div class="rightOnePartContentImg">
                  <image-preview :src="drawerActivityInfo.cover" :width="80" :height="80"/>
                </div>
                <div class="rightOnePartContentInfo">
                  <p>{{ drawerActivityInfo.title }}</p>
                  <p>活动类型: {{ drawerActivityInfo.typeName }}</p>
                  <p>活动时间：{{ drawerActivityInfo.startTime + '至' + drawerActivityInfo.endTime }}</p>
                </div>
              </div>
            </div>
            <div class="rightTwoPart">
              <div class="rightTwoPartTitle">
                <span>访问信息</span>
                <span>浏览了{{ drawerBrowseInfo.browseNumber }}次，共浏览{{ drawerBrowseInfo.browseTimeLength | formatSeconds }}，浏览完整度{{ drawerBrowseInfo.browseRatio }}%</span>
              </div>
              <el-divider></el-divider>
              <div class="rightTwoPartTimeline">
                <el-timeline>
                  <el-timeline-item
                    v-for="(item, index) in drawerActionList"
                    color="#6b8cf8"
                    :timestamp="parseTime(item.entryTime) + ' ' + item.travel" placement="top" :key="index">
                  </el-timeline-item>
                </el-timeline>
                <pagination
                  v-show="browseRecordTotal>0"
                  :total="browseRecordTotal"
                  :page.sync="queryBrowseRecordParams.pageNum"
                  :limit.sync="queryBrowseRecordParams.pageSize"
                  @pagination="getBrowseRecord"
                />
              </div>
              <div class="actionTotal">
                客户行为动态：{{ browseRecordTotal }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { potentialPageList,browseRecordList,potentialDataStats,updateMember,browseRecordStats } from "@/api/triones/member";
import { activityDetailById } from "@/api/triones/activity";
import ActivitySelector from "@/components/yjj/ActivitySelector"
import moment from 'moment';
export default {
  name: "index",
  components: { ActivitySelector },
  dicts: ['enroll_type','browse_schedule','product_type','member_browse_status','product_type'],
  data() {
    return {
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        wxNickname: undefined,
        direct: undefined,
        memberType: '0',
        browseSchedule: '0,100',
        dateRange: [],
        remark: undefined,
        productType: '1',
        activityId: undefined,
        isEnrollInfo: 0
      },
      loading: false,
      dataList: [],
      total: 0,
      potentialStats: {
        todayAddMemberNumber: 0,
        todayAddMemberMobileNumber: 0,
        memberNumberTotal: 0,
        memberMobileNumberTotal: 0,
      },
      useGuideOpen: false,
      detailDrawerOpen: false,
      drawerProductType: '1',
      drawerActivityId: undefined,
      drawerMemberForm: {
        id: undefined,
        nickname: undefined,
        avatarUrl: undefined,
        remark: undefined,
        mobile: undefined
      },
      drawerMemberStatus: '',
      drawerDegreeSteps: 1,
      drawerAvgGapTime: 0,
      drawerShareNumber: 0,
      drawerActivityInfo: {
        title: '',
        cover: undefined,
        typeName: undefined,
        startTime: undefined,
        endTime: undefined
      },
      drawerBrowseInfo: {
        browseNumber: 0,
        browseTimeLength: 0,
        browseRatio: undefined,
        enrollStatus: undefined,
      },
      drawerActionList: [],
      drawerActionStartTime: '',
      drawerActionEndTime: '',
      browseRecordTotal: 0,
      queryBrowseRecordParams: {
        browseId: undefined,
        pageNum: 1,
        pageSize: 10
      },
      visible: false,
      memberRemark: undefined,
      memberId: undefined
    }
  },
  filters: {
    formatSeconds(seconds) {
      if (seconds == 0 || seconds === null || seconds === undefined) {
        return '0秒'
      }
      var hours = Math.floor(seconds / 3600);
      seconds %= 3600;
      var minutes = Math.floor(seconds / 60);
      seconds %= 60;
      let hms = '';
      if (hours && hours != 0) {
        hms += hours + '小时'
      }
      if (minutes && minutes != 0) {
        hms  += minutes + '分'
      }
      if (seconds && seconds != 0) {
        hms  += seconds + '秒'
      }
      return hms;
    }
  },
  created() {
    if (this.$route.query.memberStatus) {
      this.queryParams.memberType = this.$route.query.memberStatus;
    }
    if (this.$route.query.activityId) {
      this.queryParams.activityId = this.$route.query.activityId;
    }
    this.potentialDataStats();
    this.getList();
  },
  methods: {
    /** 潜在用户统计 */
    potentialDataStats() {
      potentialDataStats().then(response => {
        this.potentialStats = response.data;
      })
    },
    /** 获取列表 */
    getList() {
      this.loading = true;
      potentialPageList(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      })
    },
    /** 检索 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.dateRange = [];
    },
    /** 使用指南 */
    useGuide() {
      this.useGuideOpen = true;
    },
    /** 查看详情 */
    goCheckDetail: function (row) {
      this.drawerMemberForm.avatarUrl = row.avatarUrl;
      this.drawerMemberForm.nickname = row.nickname;
      this.drawerMemberForm.remark = row.remark;
      this.drawerMemberForm.mobile = row.mobile;
      this.drawerMemberStatus = row.memberStatus;
      this.queryBrowseRecordParams.browseId = row.id;
      this.drawerBrowseInfo.browseNumber = row.browseNumber;
      this.drawerBrowseInfo.browseRatio = row.browseRatio;
      this.drawerBrowseInfo.browseTimeLength = row.browseTimeLength;
      this.drawerBrowseInfo.enrollStatus = row.enrollStatus;
      this.memberId = row.memberId;
      if (row.memberStatus == 2) {
        this.drawerDegreeSteps = 1;
      }
      if (row.memberStatus == 1) {
        this.drawerDegreeSteps = 2;
      }
      if (row.enrollStatus == 1) {
        this.drawerDegreeSteps = 3;
      }
      this.drawerActivityId = row.productId;
      this.getActivityDetail(row.productId);
      this.getBrowseRecord();
      this.getBrowseRecordStats(row.id);
      this.detailDrawerOpen = true;
    },
    /** 获取活动详情 */
    getActivityDetail(activityId) {
      activityDetailById(activityId).then(response => {
        this.drawerActivityInfo = response.data;
      })
    },
    /** 获取浏览记录列表 */
    getBrowseRecord() {
      browseRecordList(this.queryBrowseRecordParams).then(response => {
        this.drawerActionList = response.rows;
        this.browseRecordTotal = response.total;
        if (this.drawerActionList) {
          this.drawerActionStartTime = this.drawerActionList[0].entryTime;
          this.drawerActionEndTime = this.drawerActionList[this.drawerActionList.length - 1].entryTime;
          this.$nextTick(() => {
            this.drawerAvgGapTime = moment(this.drawerActionEndTime)
              .diff(moment(this.drawerActionStartTime), 'seconds');
          })
        }
      })
    },
    /** 获取浏览记录相关统计 */
    getBrowseRecordStats(id) {
      browseRecordStats(id).then(response => {
        this.drawerShareNumber = response.data.shareNumber;
      })
    },
    /** 修改备注 */
    editRemark() {
      this.drawerMemberForm.remark = this.memberRemark;
      const param = {
        id: this.memberId,
        remark: this.memberRemark,
      }
      this.memberRemark = undefined;
      updateMember(param).then(response => {
        this.$message.success("保存成功");
        this.visible = false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-drawer__header {
  margin-bottom: 5px;
  background-color: #f9f9f9;
}
::v-deep .el-drawer{
  background-color: #f9f9f9;
}

.potentialTip {
  font-size: 14px;
  background-color: #e5f4fe;
  align-content: center;
  padding: 8px;
  margin-bottom: 20px;
}

.dataStats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
  margin-bottom: 20px;
  > div {
    height: 100px;
    width: 100%;
    background: -webkit-linear-gradient(bottom, #ffffff, #f2f5ff);
    border-radius: 10px;
    padding-top: 30px;
    padding-bottom: 30px;
    align-content: center;
    text-align: center;
    > span {
      font-size: 25px;
      font-weight: bold;
    }
  }
}

.describe {
  span {
    font-size: 12px;
  }
}

.middleTip {
  height: 40px;
  background-color: #fffbe6;
  padding-left: 10px;
  border: 2px solid #edb054;
  border-radius: 2px;
  align-content: center;
  font-size: 13px;
  margin-bottom: 10px;
}

.useGuide {
  img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
  p:nth-last-of-type(2n) {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }
  p:nth-last-of-type(2n + 1) {
    font-size: 16px;
    font-weight: 400;
    color: #666;
    margin-bottom: 20px;
    display: flex;
  }
}

.wxInfoTitle{
  display:flex;
  width: 100%;
  height: 100%;
  .wxInfoImg {
    vertical-align: middle;
  }
}

.link-text {
  align-content: center;
}

.wxInfo {
  display: inline-block;
  padding-left: 8px;
  text-align: left;
  align-content: center;
  vertical-align: middle;
  .wxInfoItem {
    padding: 3px 0;
    font-size: 12px;
    line-height: 12px;
  }
}

.drawerWhole {
  background-color: #f9f9f9;
  padding-left: 15px;
  padding-right: 15px;
  .onePart {
    text-align: right;
    font-size: 14px;
    margin-bottom: 20px;
    > span {
      padding-right: 20px;
    }
  }
}

.leftAndRight {
  display: flex;
  gap: 1em;
  .left {
    width: 50%;
    height: 650px;
    .remarkAndType {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5em;
      margin-bottom: 20px;
      .remarkAndTypeLeft {
        height: 110px;
        margin: 5px;
        background-color: #ffffff;
        border-radius: 20px;
        display: flex;
        text-align: center;
        .remarkAndTypeLeftImg {
          width: 40%;
          align-content: center;
        }
        .remarkAndTypeLeftRemark {
          width: 60%;
          align-content: center;
          text-align: left;
          p:first-child {
            margin: 2px;
            font-size: 14px;
          }
          p:nth-of-type(2) {
            margin: 2px;
            font-size: 14px;
            color: rgba(0,0,0,0.5);
          }
          p:last-child {
            margin: 2px;
            font-size: 14px;
          }
        }
      }
      .remarkAndTypeRight {
        height: 110px;
        margin: 5px;
        background-color: #ffffff;
        border-radius: 20px;
        display: flex;
        text-align: center;
        text-align: center;
        .remarkAndTypeRightImg {
          width: 30%;
          align-content: center;
          text-align: right;
        }
        .remarkAndTypeRightMemberType {
          width: 70%;
          text-align: left;
          align-content: center;
          padding-left: 10px;
          p:first-child {
            margin: 2px;
            font-size: 12px;
            color: rgba(0,0,0,0.5);
          }
          p:last-child {
            margin: 2px;
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
    }
    .degree {
      width: 100%;
      height: 200px;
      background-color: #ffffff;
      border-radius: 20px;
      padding: 20px;
      margin-bottom: 20px;
      .degreeTitle {
        align-content: center;
        height: 20px;
        span:first-child {
          font-size: 18px;
        }
        span:last-child {
          padding-left: 10px;
          font-size: 13px;
          color: rgba(0,0,0,0.5);
        }
      }
      .steps {
        align-content: center;
      }
    }
    .depth {
      width: 100%;
      height: 270px;
      background-color: #ffffff;
      border-radius: 20px;
      padding: 20px;
      .depthTitle {
        align-content: center;
        height: 20px;
        > span {
          font-size: 18px;
        }
      }
      .depthStats {
        background-color: #fafafa;
        align-content: center;
        text-align: center;
        >div:first-child {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          height: 130px;
        }
        .setDivider {
          margin: 0px;
        }
        .timeSlot {
          text-align: right;
          align-content: center;
          padding: 5px;
          font-size: 14px;
          height: 30px;
          color: rgba(0,0,0,0.5);
        }
        .statsShow {
          padding-top: 30px;
          font-size: 24px;
          font-weight: bold;
          margin: 5px;
        }
        .statsShowDesc {
          font-size: 14px;
          color: rgba(0,0,0,0.5);
          margin: 5px;
        }
      }
    }
  }
  .right {
    width: 50%;
    height: 650px;
    .rightOnePart {
      background-color: #ffffff;
      height: 200px;
      border-radius: 20px;
      padding: 20px;
      margin-bottom: 20px;
      .rightOnePartTitle {
        align-content: center;
        height: 20px;
        > span {
          font-size: 18px;
        }
      }
      .rightOnePartContent {
        display: flex;
        .rightOnePartContentImg {
          width: 20%;
          text-align: center;
        }
        .rightOnePartContentInfo {
          align-content: center;
          p:nth-of-type(1) {
            margin: 0 0 5px 0;
            font-size: 14px;
            font-weight: bold;
          }
          p:nth-of-type(2) {
            margin: 0 0 5px 0;
            font-size: 14px;
            color: rgba(0,0,0,0.5);
          }
          p:nth-of-type(3) {
            margin: 0 0 5px 0;
            font-size: 14px;
          }
        }
      }
    }
    .rightTwoPart {
      background-color: #ffffff;
      height: 410px;
      border-radius: 20px;
      padding: 20px;
      .rightTwoPartTitle {
        align-content: center;
        height: 20px;
        span:first-child {
          font-size: 18px;
        }
        span:last-child {
          padding-left: 10px;
          font-size: 13px;
          color: rgba(0,0,0,0.5);
        }
      }
      .rightTwoPartTimeline {
        height: 270px;
        overflow: scroll;
        white-space: normal;
      }
      .actionTotal {
        padding: 10px;
        text-align: right;
        align-content: center;
        font-size: 14px;
        color: rgba(0,0,0,0.5);
      }
    }
  }
}

.editRemark {
  position: relative;
  left: -20px;
  bottom: -10px;
}
</style>
